<template>
	<view class="container">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">创建场景</view>
			<view class="plus-icon-container">
				<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="weekList">
			<view class="uni-list">
				<view v-for="item in items" :key="item.value" class="uni-list-cell uni-list-cell-pd"
					@click="toggleSelection(item)">
					<view class="item-label" :class="{ 'selected': item.selected }">{{item.name}}</view>
					<image v-if="item.selected" src="../../static/images/mode/complete.png" class="checkmark-image" />
				</view>
			</view>
		</view>

		<button  class="button"  type="primary" @click="submitSelection">提交</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: [
					{value: 'Mon',name: '星期一',selected: false},
					{value: 'Tues',name: '星期二',selected: false},
					{value: 'Wed',name: '星期三',selected: false},
					{value: 'Thur',name: '星期四',selected: false},
					{value: 'Fri',name: '星期五',selected: false},
					{value: 'Sat',name: '星期六',selected: false},
					{value: 'Sun',name: '星期日',	selected: false}
				],
				selectedItems: []
			}
		},
		methods: {
			prev() {
				uni.navigateBack({
					url: ".../index.vue"
				})
			},
			toggleSelection(item) {
				item.selected = !item.selected;
				
			},
			 submitSelection() {
			      const selectedItems = this.items.filter(item => item.selected).map(item => item.name);
			      uni.setStorage({
			        key: 'selectedItems',
			        data: selectedItems,
			        success() {
			          uni.navigateBack();
			        }
			      });
			    },
			    loadSelections() {
			      uni.getStorage({
			        key: 'selectedItems',
			        success: (res) => {
			          const selectedValues = res.data;
			          this.items.forEach(item => {
			            item.selected = selectedValues.includes(item.name);
			          });
			        }
			      });
			    }
			  },
		mounted() {
			this.loadSelections();
		}
	}
</script>
<style scoped>
	page {
		background-color: #f9f9f9;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;

		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #0a0d14;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 30px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px;
	}
	.weekList{
		margin-top:60px ;
		padding-left:20rpx ;
		padding-right: 20rpx;
	}
	.uni-list-cell {

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eaeaea;
		background-color: white;
		padding-top: 40rpx;
	}

	.item-label {
		font-size: 18px;
		padding-left:13px ;
	}

	.item-label.selected {
		color: #598ff2;
	}

	.checkmark-image {
		width: 45rpx;
		height: 45rpx;
	}
	.button{
		margin-top: 102rpx;
		height: 12%;
		width: 40%;
		background-color: #598ff2;
	}
</style>